<template>
<div>
     <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
        <el-row>
            <el-col>
                <el-button type="primary" @click="clickAdd">添加分类</el-button> 
            </el-col>
        </el-row>
            <tree-table style="margin-top: 15px;" :data="CateList" :columns="columns" 
            :selection-type="false" :expand-type="false"
            show-index index-text="#" border :show-row-hover="false"> 
            <template slot="isok" slot-scope="scope">
                <i v-if="scope.row.cat_deleted === false" class="el-icon-success" style="color: lightgreen"></i>
                <i v-else class="el-icon-error" style="color: red"></i>
            </template>
            <!-- 排序 -->
             <template slot="isok" slot-scope="scope">
                 <el-tag type="primary" size="mini" v-if="scope.row.cat_level == 0">一级</el-tag>
                 <el-tag type="success" size="mini" v-else-if="scope.row.cat_level == 1">二级</el-tag>
                 <el-tag type="warning" size="mini" v-else>三级</el-tag>
            </template>
            <!-- 操作 -->
            <template slot="oprate">
               <el-button size="mini" type="primary"><i class="el-icon-edit"></i>编辑</el-button>
               <el-button size="mini" type="danger"><i class="el-icon-search"></i>删除</el-button>
            </template>
            </tree-table>

            <!-- 分页 -->
             <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[1, 2, 3, 4]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
        </el-card>
        <!-- 添加对话框 -->
        
        <el-dialog 
        title="添加分类"
        :visible.sync="addDialogVisible"
        width="50%" 
        @close="addColse">
        <el-form :model="addRuleForm" :rules="Addrules" ref="AddruleForm" label-width="100px">
            <el-form-item label="分类名称" prop="cat_name">
                <el-input v-model="addRuleForm.cat_name"></el-input>
            </el-form-item>
             <el-form-item label="父级分类">
            </el-form-item>
            <!-- 级联选择器 -->
            <el-cascader style="width:100%" clearable
                v-model="selectedKeys"
                :options="ParentCatList"
                :props="cascaderProps"
                @change="handleChange"
               >
            </el-cascader>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="AdddialogVisible">确 定</el-button>
        </span>
        </el-dialog>
</div>
</template>

<script>
export default {
    data() {
        return {
            queryInfo: {
                type: 3,
                pagenum: 1,
                pagesize: 5
            },
            CateList: [],
            total: 0,
            columns: [
                {
                    label: '',
                    prop: 'cat_name'

                },
                // 是否有效
                {
                    label: '是否有效',
                    type: 'template',
                    template: 'isok'
                },
                // 排序
                {
                    label: "排序",
                    type: "template",
                    template: 'order'
                },
                // 操作
                {
                    label: "操作",
                    type: "template",
                    template: 'oprate'
                }
            ],
            // 添加分类对话框
            addDialogVisible: false,
            // 添加分类表单中的数据
            addRuleForm: {
                cat_name: '',
                cat_pid: 0,
                cat_level: 0
            },
            // 父级数据列表
            ParentCatList: [],
            Addrules: {
                 name: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' }
                ],
            },
            // 选中的父级元素
            selectedKeys: [],
            // 指定级联对象配置
            cascaderProps: {
                expandTrigger: 'hover' ,
                value: 'cat_id',
                label: 'cat_name',
                children: 'children'
            },
           
           


        }
    },
    created(){
        this.getCateList()
    },
    methods: {
        // 对话框确认后
        AdddialogVisible() {
            // console.log(this.addRuleForm.cat_name)
            this.$refs.AddruleForm.validate(async valid => {
                if (!valid) return
                const {data: res} = await this.$http.post('categories', this.addRuleForm)
                if (res.meta.status !== 201) return this.$message.error('添加失败')
                this.$message.success('添加成功')
                this.getCateList()
                this.addDialogVisible = false


            })
        },
        // 对话框打开
        clickAdd() {
            this.getParentCat()
            this.addDialogVisible = true
        },
        async getCateList(){
            const {data: res} = await this.$http.get('categories', {params: this.queryInfo})
            if (res.meta.status !== 200) return this.$message.error('获取失败')
            this.CateList = res.data.result
            this.total = res.data.total
        },
        handleSizeChange(newSize) {
            this.queryInfo.pagesize = newSize
            this.getCateList()
        },
        handleCurrentChange(curent) {
            this.queryInfo.pagenum = curent
            this.getCateList()

        },
         // 获取父级分类的数据
            async getParentCat() {
                const {data: res} = await this.$http.get('categories', {params: {type: 2}})
                if(res.meta.status !== 200) return this.$message.error('获取父级数据失败')
                this.ParentCatList = res.data
            },
            // 监听父级变化
             // 监听级联对象
            handleChange(value){
              
                if(value.length>0){
                    this.addRuleForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]
                    this.addRuleForm.cat_level = this.selectedKeys.length
                }else{
                    this.addRuleForm.cat_pid = 0
                    this.addRuleForm.cat_level = 0
                }
               
            },
            createCat(){
                console.log(this.addRuleForm)
            },

            // 监听close函数
            addColse(){
                this.$refs.AddruleForm.resetFields()
                this.selectedKeys = []
                this.addRuleForm.cat_pid = 0
                this.addRuleForm.cat_level=0
            }



    }
    

}
</script>
<style  scoped>
</style>